<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画圆</title>
	</head>
	<body>
		<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
			您的浏览器不支持canvas标签。
		</canvas>
		<script type="text/javascript">
		//获取Canvas对象(画布)
		var canvas = document.getElementById("myCanvas");
		//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
		if(canvas.getContext){  
    	//获取对应的CanvasRenderingContext2D对象(画笔)
   		var ctx = canvas.getContext("2d");  
    
   		 //开始一个新的绘制路径
    	ctx.beginPath();
 	    //设置弧线的颜色为蓝色
 	    ctx.strokeStyle = "blue";
	    var circle = {
        x : 100,    //圆心的x轴坐标值
        y : 100,    //圆心的y轴坐标值
        r : 50      //圆的半径
	    };
	    //以canvas中的坐标点(100,100)为圆心，绘制一个半径为50px的圆形
	    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);    
	    //按照指定的路径绘制弧线
	    ctx.stroke();
		}
		else{
			alert("不支持");
		}
</script>
	</body>
</html>
